<template>
<div class="slider" ref="rootRef">
  <div class="slider-group">
    <div
      class="slider-page"
      v-for="item in sliders"
      :key="item.id"
    >
      <a :href="item.link">
        <img :src="item.pic">
      </a>
    </div>
  </div>
  <div class="dots-wrapper">
    <span
      class="dot"
      v-for="(item, index) in sliders"
      :key="item.id"
      :class="{'active': currentPageIndex === index}"
    ></span>
  </div>
</div>
</template>

<script type="text/ecmascript-6">
// Compositiion API中使用ref-API
import { ref } from 'vue'
import useSlider from './use-slider'

export default {
  name: 'slider',
  props: {
    sliders: {
      type: Array,
      default() {
        return []
      }
    }
  },
  // Compositiion API 需要使用setup
  setup() {
    // 在setup中是拿不到DOM对象的
    // rootRef初始化为null值
    // 接受一个内部值并返回一个响应式且可变的 ref 对象。const count = ref(0) console.log(count.value) // 0
    // 要获取模版中的DOM，初始值需要赋值为空，或者null, 变量名一定要和模版中的ref一致 只有在mounted中的rootRef.value中才能获得DOM结构
    const rootRef = ref(null)
    // 这里传值不能直接穿rootRef.value 因为rootRef.value在这里不是一个dom对象，必须要传入一个ref对象（ref对象是响应式的数据）
    // 因为ref对象是响应式的数据，然后在useSlider中的onMounted中取value就会取到它的DOM了
    const { currentPageIndex } = useSlider(rootRef)

    // 模版中的变量 一定要在setup函数中return出去，这样才能在模版中渲染出来
    // 所以这里一定要返回与模板中同名的rootRef
    return {
      rootRef,
      currentPageIndex
    }
  }
}
</script>

<style lang="scss" scoped>
.slider {
    min-height: 1px;
    font-size: 0;
    touch-action: pan-y;
    .slider-group {
      position: relative;
      overflow: hidden;
      white-space: nowrap;
      .slider-page {
        display: inline-block;
        transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
        a {
          display: block;
          width: 100%;
        }
        img {
          display: block;
          width: 100%;
        }
      }
    }
    .dots-wrapper {
      position: absolute;
      left: 50%;
      bottom: 12px;
      line-height: 12px;
      transform: translateX(-50%);
      .dot {
        display: inline-block;
        margin: 0 4px;
        width: 8px;
        height: 8px;
        transform: translateZ(1px);
        border-radius: 50%;
        background: $color-text-l;
        &.active {
          width: 20px;
          border-radius: 5px;
          background: $color-text-ll;
        }
      }
    }
  }
</style>
